<template>
  <div>
    <div class="search">
      <label>
        <input type="text" v-model="keywords">
      </label>
      <button @click="searchL">搜索</button>
    </div>
    <div class="result">
      <ul v-show="flag" class="history">
        <li v-for="(item,index) in arrList1" @click="history(index)" :key="index" >{{item}}</li>
      </ul>
      <ul v-show="!flag" class="searchList">
        <li v-for="(item,index) in submit.song" :key="index">
          <router-link :to="{path:'musicPlay',query:{songid:item.songid}}"><nav>{{item.songname}}</nav>
            <span>{{item.artistname}}</span></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {getSearch} from "@/api/api";

export default {
  name: "search",
  data(){
    return{
      keywords:'',
      submit:{song:'',album:'',artist:''},
      flag:true,
      arrList1:[],
      arr:[]
    }
  },

  methods:{
    searchL(){
      if(this.keywords){
        // // eslint-disable-next-line no-debugger
        // debugger

        // console.log(this.arrList1)
        this.arr = JSON.parse(localStorage.getItem("keywordsList"))||[]
        if(this.arr.indexOf(this.keywords)==-1){
          this.arrList1.push(this.keywords)
          localStorage.setItem("keywordsList",JSON.stringify(this.arrList1))
        }


        console.log(localStorage.getItem("keywordsList"))
        getSearch(this.keywords).then(res=>{
          console.log(res)
          this.submit= res
        });
        this.flag=false;
        // console.log(this.list)
      }
    },
    history(index){
      this.keywords = this.arrList1[index]
    }
  },
  created(){
    this.arrList1= JSON.parse(localStorage.getItem("keywordsList"))||[]
  },
  watch:{
    keywords(){
         if(this.keywords=="") {
           this.flag = true;
         }

     }
  }
}
</script>

<style scoped lang="less">
.search{
  margin:20px auto;
  text-align: center;
}
.result{
  .searchList{
    overflow: scroll;
    li{
      padding: 4px 10px;
      border-bottom: 1px solid #eee;
      nav{
        font-size: 16px;
      }
      span{
        font-size: 12px;
        color: #ccc;
      }
    }
  }
  .history{
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-wrap: wrap;
    li{
      padding: 5px;
      width: auto;
      border: 1px solid #ccc;
      background: #eee;
      border-radius: 10px;
      margin: 5px;
    }
  }

}
</style>